<template>
  <MyModal ref="myModal" title="兑换" :top="40" :width="600">
    <template #content>
      <a-form
        ref="loginForm"
        :rules="rules"
        :model="formState"
        :label-col="labelCol"
        style="width: 400px"
      >
        <a-form-item name="keyword" label="购买商品" style="margin-top: 15px">
          <a-select v-model:value="formState.type" placeholder="购买商品" style="width: 200px">
            <a-select-option v-for="(item, index) in typeList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item name="content" label="购买数量">
          <a-input v-model:value="formState.content" placeholder="购买数量" style="width: 200px"></a-input>
        </a-form-item>

        <a-form-item name="pay" label="实际支付">
          <span>{{ payAmount }}</span>
          <span style="margin-left: 3px; color: #aeaeae">NB</span>
        </a-form-item>
      </a-form>

      <div
        style="
          border-top: 1px solid #f0f0f0;
          text-align: right;
          padding-top: 10px;
          padding-right: 10px;
        "
      >
        <a-button @click="() => myModal.cancelModal()" style="margin-right: 10px">取消</a-button>
        <a-button type="primary" @click="handleSubmit">确定</a-button>
      </div>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import * as assetsOrderApi from '@/api/assetsOrder'
import { message } from 'ant-design-vue'

const userStore = useUserStore()

const myModal = ref()
const loginForm = ref()

const showModal = () => {
  myModal.value?.showModal()
}

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

let payAmount = ref<number>(0)

import type { Rule } from 'ant-design-vue/es/form'
const rules: Record<string, Rule[]> = {
  content: [{ required: true, message: '必填项', trigger: 'blur' }],
}

let labelCol = { span: 6 }
interface FormState {
  keyword: string
  type: number
  content: string
}
const formState = ref<FormState>({
  keyword: '',
  type: 1,
  content: '',
})

watch(
  () => ({ ...formState.value }),
  (newVal, oldVal) => {
    // console.log('newVal=', newVal)
    if (newVal.type == 1) {
      payAmount.value = Number(newVal.content) * 59
    } else if (newVal.type == 2) {
      payAmount.value = Number(newVal.content) * 599
    }
  },
)

import type { SelectProps } from 'ant-design-vue'
const typeList = ref<SelectProps['options']>([
  {
    label: '一个月（30天）',
    value: 1,
  },
  {
    label: '一年（365天）',
    value: 2,
  },
])

const handleSubmit = async () => {
  let params = {
    count: formState.value.content,
    type: formState.value.type,
    // payAmount: payAmount.value,
  }

  console.log('params=', params)

  loginForm.value.validate().then(async () => {
    try {
      let { state, message: msg } = await assetsOrderApi.addCard(params)
      if (state === 200) {
        message.success('兑换成功')
        myModal.value.cancelModal()
        emit('refresh')
      } else {
        message.error(msg)
      }
    } catch (error) {
      message.error('网络请求连接失败~')
    }
  })
}
</script>
